<!-- 表单字段组，就是我们在详情页看到的那一块一块的内容, 顺带有ID、CreateXxx、UpdateXxx的显示 -->
<template>
  <div class="shadow-2">
    <q-expansion-item :default-opened="props.defaultOpened" expand-icon-toggle header-class="text-subtitle1"
      :label="props.title">
      <template v-slot:header>
        <q-item-section avatar>
          {{$t(props.title)}}
        </q-item-section>
        <q-item-section avatar v-if="modelId">
          <q-chip size="sm" square :ripple="false">
            <q-avatar color="grey-5" text-color="white">ID</q-avatar>
            <span class="chip-font">
            {{modelId}}
              </span>
          </q-chip>
        </q-item-section>
        <q-item-section/>
        <q-item-section class="lt-md q-pl-xs">
          <q-btn outline icon="bi-info" size="sm" style="width: 22px" :title="$t('创建/更新信息')" color="info"
            v-if="updateDt || createDt" @click="dlgCreateUpdateInfo=true" :ripple="false">
          </q-btn>
        </q-item-section>
        <q-item-section class="gt-sm" style="padding-left:0" side v-if="createDt">
          <q-chip size="sm" square :title="$t('创建人/创建时间')" :ripple="false">
            <q-avatar color="grey-5" text-color="white">C</q-avatar>
            <span class="chip-font">
            {{createP}}
            {{createDt}}
              </span>
          </q-chip>
        </q-item-section>
        <q-item-section class="gt-sm" style="padding-left:0" side v-if="updateDt">
          <q-chip size="sm" square :title="$t('更新人/更新时间')" :ripple="false">
            <q-avatar color="grey-5" text-color="white">U</q-avatar>
            <span class="chip-font">
            {{updateP}}
            {{updateDt}}
              </span>
          </q-chip>
        </q-item-section>
      </template>
      <q-separator />
      <slot></slot>
    </q-expansion-item>

    <q-dialog v-model="dlgCreateUpdateInfo" transition-hide="none" transition-show="none">
      <q-card>
        <q-card-section>
          <div class="text-caption" v-if="createDt">
                <span class="chip-font">
                {{createP}} {{$t('创建于')}}
                {{createDt}}
                </span>
          </div>
          <div class="text-caption" v-if="updateDt">
                <span class="chip-font">
                {{updateP}} {{$t('更新于')}}
                {{updateDt}}
                  </span>
          </div>
        </q-card-section>
     </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: 'formFieldGroup'
}
</script>
<script lang="ts" setup>

import {computed, ref} from 'vue'

interface PropsDef {
  title: string,
  modelWithCreateUpdate?: Record<string, any>,
  modelId?: string,
  defaultOpened?: boolean
}

const props = withDefaults(defineProps<PropsDef>(), {
  defaultOpened: true
})

const modelId = computed(() => {
  if (props.modelWithCreateUpdate && props.modelId) {
    return props.modelWithCreateUpdate[props.modelId] as string
  }
  return ''
})

const createP = computed(() => {
  if (props.modelWithCreateUpdate) {
    return $f.fmt.userDisp(props.modelWithCreateUpdate['createP'] as string, props.modelWithCreateUpdate['createPn'] as string)
  }
  return ''
})

const createDt = computed(() => {
  if (props.modelWithCreateUpdate) {
    return $f.fmt.dtFmtFullNoSec(props.modelWithCreateUpdate['createDt'] as Date)
  }
  return ''
})

const updateP = computed(() => {
  if (props.modelWithCreateUpdate) {
    return $f.fmt.userDisp(props.modelWithCreateUpdate['updateP'] as string, props.modelWithCreateUpdate['updatePn'] as string)
  }
  return ''
})

const updateDt = computed(() => {
  if (props.modelWithCreateUpdate) {
    return $f.fmt.dtFmtFullNoSec(props.modelWithCreateUpdate['updateDt'] as Date)
  }
  return ''
})

const dlgCreateUpdateInfo = ref(false)

</script>

<style lang="sass" scoped>
.chip-font
  font-size: 12px
</style>
